<template>
  <div>
    <el-container style="margin: 10px 180px;text-align:center; ">
      <el-aside class="elaside" style="height: 610px;">
        <div>
          <div style="padding: 5%;">
            <el-avatar :size="200" :src="user.iconUrl"></el-avatar>
          </div>
          <p style="margin: 5%;font-size: 18px">{{user.name}}</p>
          <el-menu default-active="1" class="el-menu-vertical-demo" style="background-color: #d3dce6;">
            <el-menu-item index="1" @click="show=1;offset=0;getSchedule(0)">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>课程时间表</span>
              </template>
            </el-menu-item>
            <el-menu-item index="2" @click="show=2;getTableData()">
              <i class="el-icon-menu"></i>
              <span slot="title">{{courseTitle}}</span>
            </el-menu-item>
            <el-menu-item index="3" @click="()=>{show=3; this.$router.push('/schedule/userInfo')}">
              <i class="el-icon-document"></i>
              <span slot="title">个人中心</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      <el-main class="elmain">
        <router-view v-show="show==3||show==4"></router-view>
        <div v-show="show==1" style="width: 100%">
          <div id="coursesTable"></div>
          <div align="center">
            <el-button type="primary" style="margin: 0% 15%" icon="el-icon-arrow-left" @click="setOffset(-7)">上一周
            </el-button>
            <el-button type="primary" style="margin: 0% 15%" @click="setOffset(7)">下一周<i
              class="el-icon-arrow-right el-icon--right"></i></el-button>
          </div>
        </div>
        <el-container v-show="show==2" style="padding: 0 0 0 0">
          <el-main style="padding: 0 0 0 0">
            <el-table :data="courseData" border stripe height="550">
              <el-table-column prop="id" label="课程id" align="center"></el-table-column>
              <el-table-column prop="title" label="课程名称" align="center"></el-table-column>
              <el-table-column prop="total" label="开课节数" align="center"></el-table-column>
              <el-table-column prop="finished" label="是否结束" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.finished">已结束</span>
                  <span v-else>未结束</span>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" :label="timeTile " align="center"></el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                  <el-button
                    v-if="user.status==1"
                    @click="setFinish(scope.$index)"
                    :disabled="courseData[scope.$index].finished"
                    type="text"
                    size="small">
                    结束
                  </el-button>
                  <el-button
                    @click="getDetail(scope.$index)"
                    :disabled="courseData[scope.$index].finished"
                    type="text"
                    size="small">
                    进入课堂
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
          <el-footer style="padding: 0 0 0 0;margin-top: 13px;height: 32px">
            <el-button v-show='addcourse' type="primary" size="small" @click="()=>{show=4;this.$router.push('/home/schedule/addcourse')}">添加课程
            </el-button>
          </el-footer>
        </el-container>

      </el-main>
    </el-container>
  </div>
</template>

<script>
import {Timetables} from '../lib/Timetables.min.js'

export default {
  name: 'Schedule',
  data () {
    return {
      uid: window.sessionStorage.token,
      show: 1,
      offset: 0,
      courseData: [],
      courseList: [],
      week:
          window.innerWidth > 360
            ? ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            : ['一', '二', '三', '四', '五', '六', '七'],
      day: new Date().getDay(),
      courseType: [
        [{index: '1', name: '10:00-11:00'}, 2],
        [{index: '2', name: '11:00-12:00'}, 2],
        [{index: '3', name: '14:00-15:00'}, 2],
        [{index: '4', name: '15:00-16:00'}, 2],
        [{index: '5', name: '16:00-17:00'}, 2],
        [{index: '6', name: '19:00-20:00'}, 2],
        [{index: '7', name: '20:00-21:00'}, 2]
      ]
    }
  },
  // 实例化(初始化课表)
  mounted () {
    this.getSchedule(this.offset)
  },

  methods: {
    setFinish (index) {
      var _this = this
      this.postRequest('/api/course/finish', {
        id: _this.courseData[index].id
      }).then((resp) => {
        if (resp && resp.status == 200) {
          if (resp.data.code == 200) {
            this.$message('课程结束成功！')
            _this.courseData = resp.data.data
          } else {
            this.$alert('课程结束失败！')
          }
        } else {
          this.$alert('请求失败！')
        }
      })
    },
    setOffset (e) {
      this.offset += e
      this.getSchedule(this.offset)
    },
    showTable () {
      new Timetables({
        el: '#coursesTable',
        timetables: this.courseList,
        week: this.week,
        timetableType: this.courseType,
        highlightWeek: this.day,
        gridOnClick: function (e) {
          if (e.name != '') {
            alert(
              e.name + ' ' + e.week + ', 第' + e.index + '节课, 课长' + e.length + '节'
            )
          }
        },
        styles: {
          Gheight: 38,
          leftHandWidth: 80,
          palette: [
            '#FF6672',
            '#4F23AE',
            '#00BFFF',
            '#FF4500',
            '#40E0D0',
            '#9400D3'
          ]
        }
      })
    },
    getTableData () {
      if (this.uid != null) {
        this.getRequest('/api/course/getCourses')
          .then(res => {
            if (res.data.code === 200) {
              this.courseData = res.data.data
              // console.log(this.courseData)
            } else {
              this.$message(res.data.msg)
            }
          })
          .catch(err => {
            this.$message(err)
          })
      }
    },
    // 获取表格单行信息
    getDetail (i) {
      this.$router.push('/detail?id='+ this.courseData[i].id)
    },
    getSchedule (offset) {
      if (offset == null) {
        offset = 0
      }
      var that = this
      var api
      var status = this.user.status
      if (status == 1) {
        api = '/api/course/teaSchedule?offset=' + offset
      } else {
        api = '/api/course/stuSchedule?offset=' + offset
      }
      this.getRequest(api)
        .then(res => {
          if (res.data.code === 200) {
            that.courseList = []
            that.day = res.data.data.highlightWeek
            that.week = res.data.data.week
            var data = res.data.data.courseList
            var row = data.length
            for (var i = 0; i < row; i++) {
              var col = data[i].length
              var singleRow = []
              for (var j = 0; j < col; j++) {
                if (data[i][j] != null) {
                  singleRow.push(data[i][j])
                  singleRow.push(data[i][j])
                } else {
                  singleRow.push('')
                  singleRow.push('')
                }
              }
              that.courseList.push(singleRow)
            }
            that.showTable()
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch(err => {
          this.$message.error('++++' + err)
        })
    }
  },
  computed: {
    user () {
      // console.log(this.$store.state.user)
      return this.$store.state.user
    },
    timeTile () {
      if (this.$store.state.user.status == 0) {
        return '订阅时间'
      }
      if (this.$store.state.user.status == 1) {
        return '创建时间'
      }
    },
    addcourse () {
      if (this.$store.state.user.status == 0) {
        return false
      }
      if (this.$store.state.user.status == 1) {
        return true
      }
    },
    courseTitle () {
      var status = 0
      status = this.$store.state.user.status
      // console.log(status == 1)
      if (status == 0) {
        return '课程订阅'
      }
      if (status == 1) {
        return '课程管理'
      }
    }
  }
}
</script>

<style>
  .elaside {
    background-color: #d3dce6;
    color: #000;
    text-align: center;
  }

  .elmain {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    padding: 0%;
  }

  #coursesTable {
    margin: 0px;
  }

  .left-hand-1 {
    height: 60px;
  }

  .Courses-head {
    background-color: #edffff;
  }

  .Courses-head > div {
    text-align: center;
    font-size: 16px;
    line-height: 28px;
  }

  .left-hand-TextDom .Courses-head {
    background-color: #f2f6f7;
  }

  .Courses-leftHand {
    background-color: #f2f6f7;
    font-size: 12px;
  }

  .Courses-leftHand .left-hand-index {
    color: #9c9c9c;
    margin-bottom: 4px !important;
  }

  .Courses-leftHand .left-hand-name {
    color: #666;
  }

  .Courses-leftHand p {
    text-align: center;
    font-weight: 900;
  }

  .Courses-head > div {
    border-left: none !important;
  }

  .Courses-leftHand > div {
    padding-top: 15px;
    border-bottom: 1px dashed rgb(219, 219, 219);
  }

  .Courses-leftHand > div:last-child {
    border-bottom: none !important;
  }

  .left-hand-TextDom,
  .Courses-head {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  }

  .Courses-content > ul {
    border-bottom: 1px dashed rgb(219, 219, 219);
    box-sizing: border-box;
  }

  .Courses-content > ul:last-child {
    border-bottom: none !important;
  }

  .highlight-week {
    color: #02a9f5 !important;
  }

  .Courses-content li {
    text-align: center;
    color: #666666;
    font-size: 15px;
    line-height: 50px;
  }

  .Courses-content li span {
    padding: 6px 2px;
    box-sizing: border-box;
    line-height: 18px;
    border-radius: 4px;
    white-space: normal;
    word-break: break-all;
    cursor: pointer;
  }

  .grid-active {
    z-index: 9999;
  }

  .grid-active span {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  }

</style>
